<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<title>登陆</title>
		<link rel="stylesheet" href="/static/exam/layui/css/layui.css" media="all"/>
		<link rel="stylesheet" href="/static/exam/css/login.css" media="all"/>
		<style>
			/* 覆盖原框架样式 */
			.layui-elem-quote{background-color: inherit!important;}
			.layui-input, .layui-select, .layui-textarea{background-color: inherit; padding-left: 30px;}
		</style>
	</head>
	<body>
		<!-- Head -->
		<div class="layui-fluid">
			<div class="layui-row layui-col-space15">
				<div class="layui-col-sm12 layui-col-md12 zyl_mar_01">
					<blockquote class="layui-elem-quote">© 2021.1.10-sumerily| 在线考试系统</blockquote>
				</div>
			</div>
		</div>
		<!-- Head End -->
		
		<!-- Carousel -->
		<div class="layui-row">
			<div class="layui-col-sm12 layui-col-md12">
				<div class="layui-carousel zyl_login_height" id="zyllogin" lay-filter="zyllogin">
					<div carousel-item="">
						<div>
							<div class="zyl_login_cont"></div>
						</div>
						<div>
							<img src="/static/exam/images/carousel/01.jpg" />
						</div>
						<div>
							<div class="background">
								<span></span><span></span><span></span>
								<span></span><span></span><span></span>
								<span></span><span></span><span></span>
								<span></span><span></span><span></span>
							</div>
						</div>
						<div>
							<img src="/static/exam/images/carousel/03.jpg" />
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- Carousel End -->
		
		<!-- Footer -->
		<div class="layui-row">
			<div class="layui-col-sm12 layui-col-md12 zyl_center zyl_mar_01">
				© 2021.1.10-sumerily| 在线考试系统
			</div>
		</div>
		<!-- Footer End -->
		
		
		
		<!-- LoginForm -->
		<div class="zyl_lofo_main" id="login">
			<fieldset class="layui-elem-field layui-field-title zyl_mar_02">
				<legend>欢迎登陆</legend>
			</fieldset>
			<div class="layui-row layui-col-space15">

				<!-- 登录开始 -->
				<form class="layui-form zyl_pad_01" action="{:url('exam/register/doRegister')}">
					<div class="layui-col-sm12 layui-col-md12">
						<div class="layui-form-item">
							<input type="text" name="email" lay-verify="required|email" autocomplete="off" placeholder="账号" class="layui-input">
							<i class="layui-icon layui-icon-username zyl_lofo_icon"></i>
						</div>
					</div>
					<div class="layui-col-sm12 layui-col-md12">
						<div class="layui-form-item">
							<input type="password" name="password" lay-verify="required|pass" autocomplete="off" placeholder="密码" class="layui-input">
							<i class="layui-icon layui-icon-password zyl_lofo_icon"></i>
						</div>
					</div>
					<div class="layui-col-sm12 layui-col-md12">
						<div class="layui-row">
							<div class="layui-col-xs4 layui-col-sm4 layui-col-md4">
								<div class="layui-form-item">
									<input type="text" name="vercode" id="vercode" lay-verify="required|vercodes" autocomplete="off" placeholder="验证码" class="layui-input" maxlength="4">
									<i class="layui-icon layui-icon-vercode zyl_lofo_icon"></i>
								</div>
							</div>
							<div class="layui-col-xs4 layui-col-sm4 layui-col-md4">
								<div class="zyl_lofo_vercode zylVerCode" onclick="zylVerCode()"></div>
							</div>
						</div>
					</div>
					<div class="layui-col-sm12 layui-col-md12">
						<button class="layui-btn layui-btn-fluid" lay-submit="" lay-filter="demo1">立即登录</button>
						<p style="margin: 15px 5px"><a href="javascript:;" onclick="checking()">注册</a></p>
					</div>
				</form>
				<!-- 登录结束 -->

				<!-- 注册开始 -->

			</div>
		</div>
		<!-- LoginForm End -->
		<!-- RegisterForm -->
		<div class="zyl_lofo_main" style="display: none;height: 374px;" id="register">
			<fieldset class="layui-elem-field layui-field-title zyl_mar_02">
				<legend>欢迎注册</legend>
			</fieldset>
			<div class="layui-row layui-col-space15">
				<form class="layui-form zyl_pad_01">

					<div class="layui-col-sm12 layui-col-md12">
						<div class="layui-form-item">
							<input type="text" name="name" lay-verify="required|userName" autocomplete="off" placeholder="昵称" class="layui-input">
							<i class="layui-icon layui-icon-username zyl_lofo_icon"></i>
						</div>
					</div>
					<div class="layui-col-sm12 layui-col-md12">
						<div class="layui-form-item">
							<input type="text" name="email" lay-verify="required|email" autocomplete="off" placeholder="邮箱" class="layui-input">
							<i class="layui-icon layui-icon-login-qq zyl_lofo_icon"></i>
						</div>
					</div>



					<div class="layui-col-sm12 layui-col-md12">
						<div class="layui-form-item">
							<input type="password" name="password" lay-verify="required|pass" id="pass" autocomplete="off" placeholder="密码" class="layui-input">
							<i class="layui-icon layui-icon-password zyl_lofo_icon"></i>
						</div>
					</div>
					<div class="layui-col-sm12 layui-col-md12">
						<div class="layui-form-item">
							<input type="password" lay-verify="required|repass" autocomplete="off" placeholder="确认密码" class="layui-input">
							<i class="layui-icon layui-icon-password zyl_lofo_icon"></i>
						</div>
					</div>
					<div class="layui-col-sm12 layui-col-md12">
						<button type="button" class="layui-btn  layui-btn-fluid" lay-submit=""   lay-filter="demo2">注 册</button>
						<p style="margin: 15px 5px"><a href="javascript:;" onclick="checking()">登录</a></p>
					</div>
				</form>

				<!-- 注册结束 -->

			</div>
		</div>
		<!-- RegisterForm End -->
		
		<!-- Jquery Js -->
		<script type="text/javascript" src="/static/exam/js/jquery-1.11.3.min.js"></script>
		<!-- Layui Js -->
		<script type="text/javascript" src="/static/exam/layui/layui.js"></script>
		<!-- Jqarticle Js -->
		<script type="text/javascript" src="/static/exam/assembly/jqarticle/jparticle.min.js"></script>
		<!-- ZylVerificationCode Js-->
		<script type="text/javascript" src="/static/exam/assembly/zylVerificationCode/zylVerificationCode.js"></script>
		<script>
			function checking(){
				$("#login").fadeToggle("slow")
				$("#register").fadeToggle()
			}

			layui.use(['carousel', 'form'], function(){
				var carousel = layui.carousel
				,form = layui.form;
				
				//自定义验证规则
				form.verify({
					userName: function(value){
						if(value.length < 5 && value.length > 2){
							return '昵称2到5个字符';
						}
					}
					,pass: [/^[\S]{6,12}$/,'密码必须6到12位，且不能出现空格']
					,email: [/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/,'邮箱格式不正确']
					,repass:function (value) {
						if (value != $("#pass").val()){
							return '密码与确认密码不一致';
						}
					}
					,vercodes: function(value){
						//获取验证码
						var zylVerCode = $(".zylVerCode").html();
						if(value!=zylVerCode){
							return '验证码错误（区分大小写）';
						}
					}
					,content: function(value){
						layedit.sync(editIndex);
					}
				});
				
				//监听提交
				form.on('submit(demo1)', function(data){
					// console.log(data)
					$.post("{:url('login')}",{"email":data.field.email,"password":data.field.password},function (result) {
						if (result != false ){
							window.location.href = "{:url('exam/index/index')}";
						} else {
							layer.alert('账号或密码错误！',{
								title: '错误信息'
							})
						}
					});
					return false;
				});

				//监听提交
				form.on('submit(demo2)', function(data){
					console.log(data.field.name);
					$.post("{:url('register')}",{"name":data.field.name,"email":data.field.email,"password":data.field.password},function (result) {
						if (result == 1){
							checking()
							layer.alert('注册成功！', {
								icon: 1,
								skin: 'layer-ext-moon'
							})
						} else if (result == 0) {
							layer.alert('注册失败！',{
								title: '错误信息'
							})
						}else if (result == 2) {
							layer.alert('邮箱已被注册！',{
								title: '错误信息'
						    })
						}
					},"json");
					return false;
				});
				
				
				//设置轮播主体高度
				var zyl_login_height = $(window).height()/1.3;
				var zyl_car_height = $(".zyl_login_height").css("cssText","height:" + zyl_login_height + "px!important");
				
				
				//Login轮播主体
			 	carousel.render({
					elem: '#zyllogin'//指向容器选择器
					,width: '100%' //设置容器宽度
					,height:'zyl_car_height'
					,arrow: 'always' //始终显示箭头
					,anim: 'fade' //切换动画方式
					,autoplay: true //是否自动切换false true
					,arrow: 'hover' //切换箭头默认显示状态||不显示：none||悬停显示：hover||始终显示：always
					,indicator: 'none' //指示器位置||外部：outside||内部：inside||不显示：none
					,interval: '5000' //自动切换时间:单位：ms（毫秒）
				});
				
				//监听轮播--案例暂未使用
				carousel.on('change(zyllogin)', function(obj){
					var loginCarousel = obj.index;
				});
				
				//粒子线条
				$(".zyl_login_cont").jParticle({
					background: "rgba(0,0,0,0)",//背景颜色
					color: "#fff",//粒子和连线的颜色
					particlesNumber:100,//粒子数量
					//disableLinks:true,//禁止粒子间连线
					//disableMouse:true,//禁止粒子间连线(鼠标)
					particle: {
					    minSize: 1,//最小粒子
					    maxSize: 3,//最大粒子
					    speed: 30,//粒子的动画速度
					 }
				});
				
			});
			
		</script>
	</body>
</html>
